<template>
    <div>
        <Tabs :sticky="true" :border="false" background="#0DCDB5" color="#FFFFFF"
              title-active-color='#FFFFFF'
              title-inactive-color="#FFFFFF"
              v-model="name"
              @click="onTab"
              class="tabs">
            <Tab v-for="tabItem in tabList" :title="tabItem.title" :name="tabItem.name" :key="tabItem.id">
                <Search v-model="searchValue" placeholder="搜索" @search="onSearch"/>
                <List
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了~"
                        :immediate-check="false"
                        :offset="100"
                        @load="onLoad">
                    <div class="order-box" v-for="orderItem in orderList" :key="orderItem.poId"
                         @click="jumpPage(`shootOrderInfo?orderId=${orderItem.poId}`)">
                        <div class="acea-row row-middle row-between">
                            <div class="acea-row row-middle">
                                <img :src="orderLeftIcon" alt="order-left-icon" class="order-left-icon">
                                <div class="order-title">{{orderItem.poPname}}</div>
                            </div>
                            <div class="status-1 status" v-if="orderItem.poAuditStatus === 0">未审核</div>
                            <div class="status-2 status" v-if="orderItem.poAuditStatus === 1">已通过</div>
                            <div class="status-3 status" v-if="orderItem.poAuditStatus === 2">驳回</div>
                        </div>
                        <div class="order-name">{{orderItem.poSmActivityName}}</div>
                        <div class="acea-row row-middle row-between">
                            <div class="order-time acea-row row-column row-column-between">
                                <div>开始时间：{{orderItem.sm_activity_start_date | format}}</div>
                                <div>结束时间：{{orderItem.smActivityEndDate | format}}</div>
                            </div>
<!--                            <Button :icon="btnIcon" color="#FF8D51" class="bottom-btn" size="large"-->
<!--                                    v-if="orderItem.poIsOver === 0">传照片-->
<!--                            </Button>-->
<!--                            <Button color="#0DCDB5" class="bottom-btn" size="large" v-if="orderItem.poIsOver === 1">-->
<!--                                已完成-->
<!--                            </Button>-->
                                <Button color="#FF8D51" class="bottom-btn" size="large" >查看</Button>
                        </div>
                    </div>
                </List>
                <Empty description="暂无数据~" v-if="orderList.length === 0"/>
            </Tab>
        </Tabs>
    </div>
</template>

<script>
    import {Tab, Tabs, List, Button, Search,Empty} from 'vant';
    import {getShootList} from "../api/public";
    import dayjs from "dayjs";
    import localStorage from "@utils/store/localStorage";
    import {mapGetters} from "vuex";

    const loadImg = name => require(`@/assets/images/${name}.png`)

    export default {
        name: "ShootOrder",
        components: {
            Tab,
            Tabs,
            List,
            Button,
            Search,
            Empty
        },
        data() {
            return {
                tabList: [
                    {
                        id: 1,
                        title: '全部',
                        name: 100,
                    },
                    {
                        id: 2,
                        title: '未完成',
                        name: 0,
                    },
                    {
                        id: 3,
                        title: '已完成',
                        name: 1,
                    }
                ],
                loading: false,
                finished: false,
                orderLeftIcon: loadImg('order_left_icon'),
                arrowRight: loadImg('arrow-right'),
                btnIcon: loadImg('shoot'),
                orderList: [],
                pageNo: 1,
                flag: false,
                name: 100,
                searchValue: '',
                urlId:localStorage.get('creationId')
            }
        },
        computed:{
          ...mapGetters(['userInfo'])
        },
        mounted() {
            this.init(1, this.userInfo.umId, this.name,null,this.urlId)
        },
        filters: {
            format: function (value) {
                if (!value) return ''
                return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        methods: {
            jumpPage(page) {
                this.$router.push(page)
            },
            init(pageNo, pumId, poIsOver, searchCondition,poCreationId) {
                getShootList(pageNo, pumId, poIsOver, searchCondition,poCreationId).then(res => {
                    this.loading = true;
                    this.orderList.push.apply(this.orderList, res.data.records);
                    this.loading = false;
                    this.flag = res.data.records.length >= 10;
                })
            },
            onTab(name) {
                this.loading = false;
                this.finished = false;
                this.flag = false;
                this.name = name;
                this.orderList = [];
                this.pageNo = 1;
                this.init(1, this.userInfo.umId, name,null,this.urlId)
            },
            onSearch(val) {
                this.loading = false;
                this.finished = false;
                this.flag = false;
                this.orderList = [];
                this.pageNo = 1;
                this.init(1, this.userInfo.umId, this.name, val,this.urlId)
            },
            onLoad() {
                if (this.flag) {
                    this.pageNo++;
                    this.init(this.pageNo, this.userInfo.umId, this.name,this.searchValue,this.urlId)
                } else {
                    this.finished = true;
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .tabs {
        .order-box {
            margin: 15px auto;
            width: 355px;
            height: 150px;
            background: rgba(255, 255, 255, 1);
            border-radius: 8px;
            padding: 20px;

            .order-left-icon {
                width: 15px;
                height: 15px;
            }

            .order-title {
                font-size: 14px;
                font-weight: 400;
                color: rgba(66, 69, 95, 1);
                margin-left: 9px;
            }

            .arrow-right {
                width: 14px;
                height: 14px;
            }

            .status {
                font-size: 14px;
                font-weight: 400;
            }

            .status-1 {
                color: #FF8D51;
            }

            .status-2 {
                color: #0DCDB5;
            }

            .status-3 {
                color: #A3A5B1;
            }

            .order-name {
                font-size: 18px;
                font-weight: 500;
                color: rgba(66, 69, 95, 1);
                margin: 17px 0 10px;
            }

            .order-time {
                font-size: 12px;
                font-weight: 400;
                color: rgba(163, 165, 177, 1);
                height: 40px;
            }

            .bottom-btn {
                width: 70px;
                height: 30px;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 400;
            }

            .pass-btn {
                color: #A3A5B1 !important;
            }
        }
    }
</style>
